<template>
    <div class="list">
        <div class="body">
       <van-row>
           <van-col span="6">
                <van-sidebar v-model="activeKey" >
                    <van-sidebar-item :key="cate1.categoryId" v-for="cate1 in cates" :title="cate1.categoryName" @click="changeCate(cate1.categoryId)" />
                </van-sidebar> 
           </van-col>
            <van-col span="18">
               
                <dl v-for="cate2 in cateList" :key="cate2.categoryId">
                    <dt>{{cate2.categoryName}}</dt>
                    <dd v-for="cate3 in cate2.cateList" :key="cate3.categoryId" >{{cate3.categoryName}}</dd>
                 </dl>
               
            </van-col>
       </van-row>
        <van-tabbar v-model="active">
            <van-tabbar-item to="/" icon="home-o">首页</van-tabbar-item>
            <van-tabbar-item to="/list" icon="apps-o">分类</van-tabbar-item>
            <van-tabbar-item icon="cart-o">购物车</van-tabbar-item>
            <van-tabbar-item icon="contact">我的</van-tabbar-item>
        </van-tabbar>
        </div>
    </div>
</template>
<script>
export default {
  name: "list",
  data() {
    return {
      active: 1,
      activeKey: 0,
      cates: [
      ],
      cateList: [
      ]
    };
  },
  methods: {
    changeCate(id) {
      var that = this;
        this.$axios.get('http://localhost:8088/goodsCategory/subCates?parentId='+id)
      .then(function (response) {
        if(response.status == 200){
        that.cateList =  response.data;
        }
      })
      .catch(function () {
        //失败时
      });
    }
  },
  mounted(){ //页面加载完成时
    var that = this;
    //获取一级菜单
    this.$axios.get('http://localhost:8088/goodsCategory/cates')
    .then(function (response) {
      if(response.status == 200){
       that.cates =  response.data;
      }
    })
    .catch(function () {
      //失败时
    });

     this.$axios.get('http://localhost:8088/goodsCategory/subCates')
    .then(function (response) {
      if(response.status == 200){
       that.cateList =  response.data;
      }
    })
    .catch(function () {
      //失败时
    });
  },
};
</script>
<style scoped>
</style>
